<template>
    <el-dialog v-model="dialogVisible" title="移动到" width="600px" :before-close="handleClose">
        <div class="files-move-dialog">
            <div class="files-folder-list">
                <div class="files-folder-header">全部文件</div>
                <div class="files-folders">
                    <div class="files-folder-item" v-if="showCreateInput">
                        <img src="@/assets/image/netdisk/folder.svg" alt="个人文件夹">
                        <el-input v-model="newFolderName" placeholder="正在输入内容" size="small" ref="newFolderInput"
                            @keyup.enter="createNewFolder" @blur="handleInputBlur"></el-input>
                    </div>
                    <div v-for="(folder, index) in folderList" :key="index"
                        :class="['files-folder-item', { active: selectedFolder == folder }]"
                        @click="selectFolder(folder)">
                        <img src="@/assets/image/category/folder.svg" alt="文件夹">
                        <span>{{ folder.fileName }}</span>
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="files-dialog-footer">
                <div class="files-create-btn" @click="showNewFolderInput">
                    <img src="@/assets/image/netdisk/创建文件夹1.svg" alt="创建文件夹2">
                    <span>创建文件夹</span>
                </div>
                <div class="files-dialog-buttons">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="handleConfirm" :disabled="!selectedFolder">移动到此</el-button>
                </div>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { listFileList ,moveFile } from '@/api/netdisk/file'
import { createNetdiskFolder } from '@/api/netdisk/folder'

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    movingItems: {
        type: Array,
        default: () => []
    }
});

const emit = defineEmits(['update:modelValue', 'confirm']);

// 弹窗显示控制
const dialogVisible = ref(false);

// 文件夹列表
const folderList = ref([]);
const selectedFolder = ref(null);
const showCreateInput = ref(false);
const newFolderName = ref('');
const newFolderInput = ref(null);

// 监听modelValue变化
watch(() => props.modelValue, (val) => {
    dialogVisible.value = val;
    if (val) {
        getFolderList();
    }
});

// 监听dialogVisible变化
watch(dialogVisible, (val) => {
    emit('update:modelValue', val);
});

// 获取文件夹列表
const getFolderList = async () => {
    const params = {
        parentFileId: 0,
        fileType: 'folder'
    }
    const res = await listFileList(params);
    if (res.code == 200) {
        folderList.value = res.data
    } else {
        ElMessage.error(res.message || '获取文件夹列表失败');
    }
};

// 选择文件夹
const selectFolder = (folder) => {
    selectedFolder.value = folder;
};

// 显示新建文件夹输入框
const showNewFolderInput = () => {
    showCreateInput.value = true;
    nextTick(() => {
        if (newFolderInput.value) {
            newFolderInput.value.focus();
        }
    });
};

// 处理输入框失焦
const handleInputBlur = () => {
    if (!newFolderName.value.trim()) {
        showCreateInput.value = false;
    }
};

// 创建新文件夹
const createNewFolder = async () => {
    if (!newFolderName.value.trim()) {
        showCreateInput.value = false;
        return;
    }
    try {
        const params = {
            userId: 1,
            parentFolderId: 0,
            name: newFolderName.value.trim()
        };
        const res = await createNetdiskFolder(params);

        if (res.code == 200) {
            ElMessage.success('创建成功');
            await getFolderList();
            // 创建成功后选中新创建的文件夹
            const newFolder = folderList.value.find(item => item.fileName === newFolderName.value.trim());
            if (newFolder) {
                selectedFolder.value = newFolder;
            }
        } else {
            ElMessage.error(res.message || '创建失败');
        }
    } catch (error) {
        ElMessage.error('创建失败');
    }
    showCreateInput.value = false;
    newFolderName.value = '';
};

// 关闭弹窗
const handleClose = () => {
    dialogVisible.value = false;
    selectedFolder.value = null;
};

// 确认移动
const handleConfirm = async () => {
    if (!selectedFolder.value) {
        ElMessage.warning('请选择一个文件夹');
        return;
    }
    const targetFolderId = selectedFolder.value.fileId;
    const res = await moveFile({
        fileId: props.movingItems[0].fileId,
        targetFileId: targetFolderId
    });
    if (res.code == 200) {
        ElMessage.success(`已将${movingItems.value.length}个文件移动到 ${targetFolder.fileName}`);
    } else {
        ElMessage.error(res.message || '移动失败');
    }
    emit('confirm');
};
</script>

<style lang="scss" scoped>
.files-move-dialog {
    .files-folder-list {
        .files-folder-header {
            font-size: 16px;
            font-weight: 500;
            line-height: 40px;
            padding-left: 24px;
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 16px;
            background: rgba(244, 247, 251, 1);
            box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1), inset 0px 1px 0px rgba(0, 0, 0, 0.1);
        }

        .files-folders {
            max-height: 320px;
            overflow-y: auto;

            .files-folder-item {
                display: flex;
                align-items: center;
                padding: 12px 24px;
                box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
                cursor: pointer;
                transition: all 0.3s;

                img {
                    width: 24px;
                    height: 24px;
                    margin-right: 10px;
                }

                span {
                    font-size: 14px;
                    color: #333;
                }

                &:hover {
                    background: rgba(71, 117, 245, 0.08);
                }

                &.active {
                    background: rgba(71, 117, 245, 0.08);
                }
            }
        }
    }
}

.files-dialog-footer {
    padding-left: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .files-create-btn {
        display: flex;
        align-items: center;
        cursor: pointer;

        img {
            width: 18px;
            height: 18px;
            margin-right: 8px;
        }

        span {
            font-size: 14px;
            color: #4775F5;
        }
    }
}
</style> 